<template>
	<view class="page">
		<view class="pageBg">
			<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/memberbg2.png" mode="aspectFill"></image>
		</view>
		<view class="flex0">
			<u-navbar :fixed='false' bgColor="transparent" @leftClick="navBack"  title="预约记录">
				<view slot="center" class="navTitle">
					预约记录 
				</view>
			</u-navbar>
			<view class="pd30">
				<view class="filterBlock">
					<view class="block">
						<view class="select">
							<uni-data-select
							  v-model="status"
							  :localdata="statusOptions"
							  :clear="false"
							  placeholder="全部"
							  @change="search"
							></uni-data-select>
						</view>
						<view class="date">
							<DateRange @change="dateRangeChange"></DateRange>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		<view class="flex1">
			<scroll-view scroll-y="true"  @scroll="updateScroll" :scroll-top="scrollTop" class="scrollView pt30" @scrolltolower="loadMore">
				<view class="pd30">
					<view class="appointList">
						<view class="item" v-for="(i,index) in list" :key="index">
							<navigator :url="'/subpage/expert/appointmentRecord/detail?id='+i.id" open-type="navigate" class="navigator">
								<view class="it">
									<view class="date">
										<text>{{i.date|dateFormate('YYYY-MM-DD')}}</text>
										<text style="padding-left: 10rpx;">{{i.date|dateFormate('week')}}</text>
									</view>
									<view class="time" :class="i.status==1?'active':''">
										{{i.time}}
									</view>
								</view>
								<view class="ul">
									<view class="li">
										<view class="ll">
											学校名称
										</view>
										<view class="lr">
											{{i.school}}
										</view>
									</view>
									<view class="li">
										<view class="ll">
											教室地点
										</view>
										<view class="lr">
											{{i.location}}
										</view>
									</view>
									<view class="li">
										<view class="ll">
											预约学生
										</view>
										<view class="lr">
											{{i.name}}
										</view>
									</view>
								</view>
							</navigator>
							<view class="btns">
								<view class="btn" v-if="i.status==1" @tap="openCancelAppoint(i.id)">取消预约</view>
								<view class="btn on" v-if="i.status==1">咨询完成</view>
								<navigator :url="'/subpage/teacher/appointmentRecord/detail?id='+i.id" open-type="navigate" v-if="i.status==2" class="btn on navigator">填写咨询记录</navigator>
								<view class="btn" v-if="i.status==3">已完成</view>
								<view class="btn gray" v-if="i.status==4">已取消</view>
							</view>
						</view>
					</view>
					<u-loadmore fontSize="24rpx" :status="list.length<total?(isLoading?'loading':'loadmore'):'nomore'" />
				</view>
			</scroll-view>
			<u-modal :show="showPop" title="取消说明" @confirm="cancelSubmit" @cancel="closeCancelAppoint" :showCancelButton="true" :buttonReverse="true" cancelColor="#bcb6b4" confirmColor="#fe9c29">
				<view class="slot-content">
					<textarea class="resonTextarea" placeholder="请输入取消原因" v-model="form.reson"></textarea>
				</view>
			</u-modal>
		</view>
		<view class="flex0">
			<TabBar :active="2" type="expert"></TabBar>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				oldScrollTop:0,
				scrollTop:0,
				list:[],
				status:'',
				startDate:'',
				endDate:'',
				pageSize:10,
				total:1,
				pageIndex:1,
				isLoading:false,
				showPop:false,
				form:{
					id:'',
					reson:''
				}
			}
		},
		methods: {
			openFillRecord(id){//打开填写记录页面
				uni.navigateTo({
					url:'/subpage/teacher/appointmentRecord/fillRecord?id='+id
				});
			},
			openCancelAppoint(id){//打开取消弹窗
				var that=this;
				that.form.id=id;
				that.form.reson='';
				that.showPop=true;
			},
			closeCancelAppoint(){//关闭取消弹窗
				var that=this;
				that.form.id='';
				that.form.reson='';
				that.showPop=false;
			},
			cancelSubmit(){//取消提交
				var that=this;
				console.log(that.form);
				that.showPop=false;
			},
			dateRangeChange(e){//日期范围变化
				var that=this;
				that.startDate=e.start;
				that.endDate=e.end;
				that.search();
			},
			updateScroll(e){
				this.oldScrollTop=e.detail.scrollTop;
			},
			search(){//筛选
				var that=this;
				that.list=[];
				that.pageIndex=1;
				that.scrollTop=that.oldScrollTop;
				that.$nextTick(function() {
					that.scrollTop = 0
				});
				that.getList();
			},
			getList(){
				var that=this;
				if(that.isLoading){return;};
				that.isLoading=true;
				let timer=setTimeout(function(){
					//请求开始
					var res={
						list:[
							{
								id:101,
								status:1,
								date:'2024-09-09',
								time:'14:00-15:00',
								name:'刘美美 ',
								school:'北京市海淀一中',
								location:'综合楼三楼301室(心理咨询室)'
							},
							{
								id:102,
								status:2,
								date:'2024-09-12',
								time:'14:00-15:00',
								name:'刘美美 ',
								school:'北京市海淀一中',
								location:'综合楼三楼301室(心理咨询室)'
							},
							{
								id:101,
								status:3,
								date:'2024-09-18',
								time:'14:00-15:00',
								name:'刘美美 ',
								school:'北京市海淀一中',
								location:'综合楼三楼301室(心理咨询室)'
							},
							{
								id:101,
								status:4,
								date:'2024-09-12',
								time:'14:00-15:00',
								name:'刘美美 ',
								school:'北京市海淀一中',
								location:'综合楼三楼301室(心理咨询室)'
							},
							{
								id:101,
								status:1,
								date:'2024-09-09',
								time:'14:00-15:00',
								name:'刘美美 ',
								school:'北京市海淀一中',
								location:'综合楼三楼301室(心理咨询室)'
							},
							{
								id:101,
								status:1,
								date:'2024-09-09',
								time:'14:00-15:00',
								name:'刘美美 ',
								school:'北京市海淀一中',
								location:'综合楼三楼301室(心理咨询室)'
							},
							{
								id:101,
								status:1,
								date:'2024-09-09',
								time:'14:00-15:00',
								name:'刘美美 ',
								school:'北京市海淀一中',
								location:'综合楼三楼301室(心理咨询室)'
							},
							{
								id:101,
								status:4,
								date:'2024-09-09',
								time:'14:00-15:00',
								name:'刘美美 ',
								school:'北京市海淀一中',
								location:'综合楼三楼301室(心理咨询室)'
							},
							{
								id:101,
								status:3,
								date:'2024-09-09',
								time:'14:00-15:00',
								name:'刘美美 ',
								school:'北京市海淀一中',
								location:'综合楼三楼301室(心理咨询室)'
							},
							{
								id:101,
								status:2,
								date:'2024-09-09',
								time:'14:00-15:00',
								name:'刘美美 ',
								school:'北京市海淀一中',
								location:'综合楼三楼301室(心理咨询室)'
							}
						],
						total:50
					};
					var arr=that.list.concat(res.list);
					that.list=arr;
					that.total=res.total;
					that.isLoading=false;
					//end
					clearTimeout(timer);
				},2000);
			},
			loadMore(){
				var that=this;
				if(that.list.length<that.total&&!that.isLoading){
					that.pageIndex++;
					that.getList();
				}
			}
		},
		computed:{
			
		},
		mounted(){
			this.getList();
		}
	}
</script>

<style lang="scss" scoped>
	.slot-content{
		flex: 0 0 auto;
		width: 100%;
	}
	/deep/.u-popup__content{
		border-radius: 30rpx !important;
		.u-modal__title{
			font-size: 40rpx !important;
			color: #65554d !important;
			padding-top: 40rpx !important;
			line-height: 1;
			font-weight: normal !important;
		}
		.u-modal__content{
			padding: 40rpx 40rpx 0 !important;
		}
		.u-line{
			display: none;
		}
		.u-modal__button-group__wrapper{
			height: 120rpx;
			border-radius: 0 !important;
			.u-modal__button-group__wrapper__text{
				font-size: 28rpx !important;
			}
		}
	}
	.filterBlock{
		padding-top: 20rpx;
		.block{
			.search{
				background: #fff;
				border-color: #fff;
			}
		}
		.select{
			/deep/ .uni-select{
				background: #fff !important;
				border-color: #fff !important;
			}
		}
	}
</style>
